<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { CreateElement } from 'vue'

@Component({
  name: 'RenderDivider'
})
export default class extends Vue {
  // custom content icon
  @Prop({ type: String, required: false, default: '' })
  private icon!: string
  // custom content text
  @Prop({ type: String, required: false, default: '' })
  private text!: string

  render (h: CreateElement) {
    let icon = null
    let text = null
    if (this.icon) {
      icon = h('i', { class: { [this.icon]: true } })
    }
    if (this.text) {
      text = h('span', this.text)
    }
    let inner = icon || text ? [icon, text].filter(_ => !!_) : null
    return h('el-divider', { props: this.$attrs }, inner)
  }
}
</script>
